<template>
  <div class="container" style="">
    <van-nav-bar title="客户列表" left-arrow @click-left="$router.back()" fixed>
      <template #right>
        <icon-svg name="select" class="icon" :size="20" @click="openSearch" />
      </template>
    </van-nav-bar>
    <div class="flex-scroll">
      <van-list v-model:loading="loading" loading-text="加载中..." @load="onLoad" :finished="finished" :offset="46">
        <template #default>
          <div class="item" v-for="(item, index) in list" :key="index">
            <van-image round width="80" height="80" :src="item.cus_img" />
            <div class="right">
              <div class="left_text">
                <div class="left_text_top">
                  <span style="width: 100%;"><i class="gray">客户昵称：</i>{{ item.cus_name }}</span>
                  <span>
                    <i class="gray">客户类型：</i>
                    <van-tag :type="item.cus_type == 1 ? 'primary' : 'success'">{{ item.cus_type == 1 ? '新客' : '老客'
                    }}</van-tag>
                  </span>
                  <span><i class="gray">来源：</i>{{ item.source_name }}</span>
                  <span><i class="gray">品牌：</i>{{ item.bra_name }}</span>
                  <span><i class="gray">分公司：</i>{{ item.company_name }}</span>
                  <span><i class="gray">创建人：</i>{{ item.name_add_op }}</span>
                </div>

                <span><i class="gray">创建时间：</i><i>{{ item.addtime }}</i></span>
                <!-- <span><i class="gray">加微信时：</i><i>{{ item.wechat_join_day }}</i></span> -->
              </div>
            </div>
          </div>
          <cl-empty v-if="!loading && !list.length" tips="暂无数据"></cl-empty>
        </template>
      </van-list>

    </div>
    <PopSelect ref="popSelectRef" @resetSearch="resetSearch" />
  </div>
</template>

<script>
import dayjs from "dayjs";
import PopSelect from "./popSelect.vue";
export default {
  components: {
    PopSelect
  },
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      error: false,
      search: {
        wechat_join_btime: dayjs().format("YYYY-MM-DD"),
        wechat_join_etime: dayjs().format("YYYY-MM-DD")
      },
      pages: {
        size: 10,
        page: 0
      }
    };
  },
  methods: {
    onLoad() {
      // 异步更新数据
      this.pages.page++;
      this.getList();
    },
    async getList() {
      this.loading = true;
      await this.$service.customer
        .page({
          ...this.pages,
          ...this.search
        })
        .then(res => {
          console.log(res.list, 'res.list');

          this.list.push(...res.list);
          if (!res.list.length) {
            this.finished = true;
          } else {
            this.finished = false;
          }

        })
        .catch(err => {
          console.error('请求失败:', err);
          this.loading = false;
          this.finished = true;
        });
      this.loading = false;
    },
    openSearch() {
      this.$refs.popSelectRef.open();
      this.$nextTick(() => {
        this.$refs.popSelectRef.setData(this.search);
      });
    },
    resetSearch(data) {
      this.search = { ...this.search, ...data };
      this.pages.page = 1;
      this.list = [];
      this.loading = true;
      this.getList();
    }
  }
};
</script>
<style scoped lang="scss">
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-top: 46px;
  font-size: 14px;
}

.flex-scroll {
  height: calc(100% - 46px);
  overflow-y: auto;
}

.item {
  border-radius: 10px;
  margin: 10px;
  padding: 10px;
  box-shadow: 0 2px 8px rgba(128, 128, 128, 0.3);
  display: flex;
  align-items: center;

  .right {
    flex: 1;
    display: flex;
    align-items: center;
    margin-left: 20px;
    line-height: 26px;

    .left_text {
      display: flex;
      flex-direction: column;

      .left_text_top {
        display: flex;
        flex-wrap: wrap;

        span {
          width: 50%;
        }
      }
    }
  }
}

::v-deep .van-tag {
  width: auto !important;
}

i {
  font-style: normal;

}

.gray {
  color: #c1c1c1;
  display: inline-block;
  // width: 7;
}
</style>
